<template>
  <div class="cs-label" :style="labelWidth">
    <span id="csLabel">{{ labelText }}</span>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    labelText: {
      type: String,
      require: true
    },
    width: {
      type: String,
      default: ''
    }
  },
  computed: {
    labelWidth() {
      if (this.width !== '') {
        return `width: ${this.width}px`
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped>
.cs-label {
  display: flex;
  margin-right: 16px;
}

#csLabel {
  width: 100%;
  height: 32px;
  line-height: 32px;
  border: 1px solid #e1e1e1;
  border-right: none;
  padding: 0 16px;
  color: #939393;
  box-sizing: border-box;
  font-size: 14px;
  overflow: hidden;
  text-align: center;
}
</style>
